<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';

import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

import FixedConsumptionModal from './components/FixedConsumptionModal.vue';
import InpatientLogModal from './components/InpatientLogModal.vue';

interface Pet {
  id: string;
  name: string;
  type: string;
  age?: number;
  breed?: string;
  gender: string;
  neutered: boolean;
  ownerName: string;
  contact: string;
}

interface InpatientGroup {
  id: string;
  petId: string;
  admissionDate: any;
  conditionClassification: string;
  responsibleDoctor: string;
  dischargeMethod: 'manual' | 'specified';
  dischargeDate?: any;
  stayDuration: number;
  remarks: string;
  status: 'active' | 'discharged';
  createTime: string;
}

interface TodayRegistration {
  id: string;
  petId: string;
  petName: string;
  ownerName: string;
  petType: string;
  doctor: string;
  contact: string;
}

interface PetTab {
  id: string;
  pet: Pet;
  inpatientGroups: InpatientGroup[];
  currentInpatientGroup: InpatientGroup | null;
  formData: any;
  isModified: boolean;
  createTime: string;
}

// 响应式数据
const activeTabKey = ref<string>('');
const petTabs = ref<PetTab[]>([]);
const recordsTab = ref('inpatient');
const petSelectionTab = ref('today');
const searchQuery = ref('');
const todaySearchQuery = ref('');

// 住院管理相关
const inpatientLogVisible = ref(false);
const fixedConsumptionVisible = ref(false);
const selectedInpatientGroup = ref<InpatientGroup | null>(null);

// 模拟数据
const pets = ref<Pet[]>([]);
const todayRegistrations = ref<TodayRegistration[]>([]);

// 计算属性
const currentTab = computed(() => {
  return petTabs.value.find((tab) => tab.id === activeTabKey.value);
});

const filteredPets = computed(() => {
  if (!searchQuery.value) return pets.value;

  return pets.value.filter(
    (pet) =>
      pet.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      pet.ownerName.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      pet.contact.includes(searchQuery.value),
  );
});

const filteredTodayRegistrations = computed(() => {
  if (!todaySearchQuery.value) return todayRegistrations.value;

  return todayRegistrations.value.filter(
    (registration) =>
      registration.petName
        .toLowerCase()
        .includes(todaySearchQuery.value.toLowerCase()) ||
      registration.ownerName
        .toLowerCase()
        .includes(todaySearchQuery.value.toLowerCase()) ||
      registration.contact.includes(todaySearchQuery.value),
  );
});

// 方法
const selectPet = (pet: Pet) => {
  // 检查是否已经存在该宠物的标签页
  const existingTab = petTabs.value.find((tab) => tab.pet.id === pet.id);
  if (existingTab) {
    activeTabKey.value = existingTab.id;
    return;
  }

  // 创建新的标签页
  const newTab: PetTab = {
    id: `tab_${Date.now()}`,
    pet,
    inpatientGroups: [],
    currentInpatientGroup: null,
    formData: {
      admissionDate: dayjs(),
      conditionClassification: '',
      responsibleDoctor: '',
      dischargeMethod: 'manual',
      dischargeDate: null,
      stayDuration: 0,
      remarks: '',
    },
    isModified: false,
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  };

  // 加载宠物住院数据
  loadPetInpatientData(pet.id, newTab);

  petTabs.value.push(newTab);
  activeTabKey.value = newTab.id;
};

const selectPetFromRegistration = (registration: TodayRegistration) => {
  const pet = pets.value.find((p) => p.id === registration.petId);
  if (pet) {
    selectPet(pet);
  }
};

const removePetTab = (targetKey: string) => {
  const targetIndex = petTabs.value.findIndex((tab) => tab.id === targetKey);
  petTabs.value.splice(targetIndex, 1);

  // 如果关闭的是当前激活的标签页，切换到其他标签页
  if (activeTabKey.value === targetKey) {
    activeTabKey.value = petTabs.value.length > 0 ? petTabs.value[0].id : '';
    petTabs.value.length0petTabs.value0.idpetTabs.value.length0petTabs.value0
      .id;
  }
};

const loadPetInpatientData = (petId: string, tab: PetTab) => {
  // 这里应该根据宠物ID加载住院数据
  // 现在使用模拟数据
  tab.inpatientGroups = [
    {
      id: 'IG001',
      petId,
      admissionDate: dayjs('2019-08-06'),
      conditionClassification: '感冒',
      responsibleDoctor: '孙医生',
      dischargeMethod: 'specified',
      dischargeDate: dayjs('2019-08-07'),
      stayDuration: 1,
      remarks: '感冒治疗',
      status: 'active',
      createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    },
  ];

  if (tab.inpatientGroups.length > 0) {
    tab.currentInpatientGroup = tab.inpatientGroups[0];
  }
};

const searchPets = () => {
  // 搜索逻辑已在计算属性中实现
};

const searchTodayPets = () => {
  // 搜索逻辑已在计算属性中实现
};

const showNewInpatient = () => {
  const currentTabData = currentTab.value;
  if (!currentTabData) {
    message.warning('请先选择宠物');
    return;
  }

  // 创建新的住院组
  const newInpatientGroup: InpatientGroup = {
    id: `IG${Date.now()}`,
    petId: currentTabData.pet.id,
    admissionDate: dayjs(),
    conditionClassification: '',
    responsibleDoctor: '',
    dischargeMethod: 'manual',
    dischargeDate: null,
    stayDuration: 0,
    remarks: '',
    status: 'active',
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  };

  currentTabData.inpatientGroups.unshift(newInpatientGroup);
  currentTabData.currentInpatientGroup = newInpatientGroup;

  // 重置表单数据
  currentTabData.formData = {
    admissionDate: dayjs(),
    conditionClassification: '',
    responsibleDoctor: '',
    dischargeMethod: 'manual',
    dischargeDate: null,
    stayDuration: 0,
    remarks: '',
  };

  currentTabData.isModified = true;
  recordsTab.value = 'inpatient';

  message.success('新建住院成功！');
};

const selectInpatientGroup = (inpatientGroup: InpatientGroup) => {
  const currentTabData = currentTab.value;
  if (currentTabData) {
    currentTabData.currentInpatientGroup = inpatientGroup;

    // 根据选择的住院组更新formData
    const newFormData = {
      admissionDate: inpatientGroup.admissionDate || dayjs(),
      conditionClassification: inpatientGroup.conditionClassification || '',
      responsibleDoctor: inpatientGroup.responsibleDoctor || '',
      dischargeMethod: inpatientGroup.dischargeMethod || 'manual',
      dischargeDate: inpatientGroup.dischargeDate || null,
      stayDuration: inpatientGroup.stayDuration || 0,
      remarks: inpatientGroup.remarks || '',
    };

    currentTabData.formData = newFormData;
    currentTabData.isModified = false;
  }
};

const handleFormDataChange = (formData: any) => {
  const currentTabData = currentTab.value;
  if (currentTabData) {
    currentTabData.formData = formData;
    currentTabData.isModified = true;
  }
};

const handleSaveInpatient = () => {
  const currentTabData = currentTab.value;
  if (currentTabData && currentTabData.currentInpatientGroup) {
    // 更新当前住院组记录的内容
    Object.assign(
      currentTabData.currentInpatientGroup,
      currentTabData.formData,
    );

    // 计算入住时间
    if (
      currentTabData.formData.admissionDate &&
      currentTabData.formData.dischargeDate
    ) {
      const admissionDate = dayjs(currentTabData.formData.admissionDate);
      const dischargeDate = dayjs(currentTabData.formData.dischargeDate);
      currentTabData.currentInpatientGroup.stayDuration =
        dischargeDate.diff(admissionDate, 'day') + 1;
    }

    // 同时更新住院组列表中的对应记录
    const groupIndex = currentTabData.inpatientGroups.findIndex(
      (group) => group.id === currentTabData.currentInpatientGroup?.id,
    );
    if (groupIndex !== -1 && currentTabData.inpatientGroups[groupIndex]) {
      Object.assign(
        currentTabData.inpatientGroups[groupIndex],
        currentTabData.currentInpatientGroup,
      );
    }

    currentTabData.isModified = false;
    message.success('住院信息保存成功！');
  }
};

const showInpatientLogModal = () => {
  if (!currentTab.value?.currentInpatientGroup) {
    message.warning('请先选择住院组');
    return;
  }
  selectedInpatientGroup.value = currentTab.value.currentInpatientGroup;
  inpatientLogVisible.value = true;
};

const showFixedConsumptionModal = () => {
  if (!currentTab.value?.currentInpatientGroup) {
    message.warning('请先选择住院组');
    return;
  }
  selectedInpatientGroup.value = currentTab.value.currentInpatientGroup;
  fixedConsumptionVisible.value = true;
};

// 初始化数据
onMounted(() => {
  // 模拟宠物数据
  pets.value = [
    {
      id: 'P001',
      name: '球球',
      type: '狗类',
      age: 3,
      breed: '金毛',
      gender: '公',
      neutered: false,
      ownerName: '赵女士',
      contact: '18300138001',
    },
    {
      id: 'P002',
      name: '兜兜',
      type: '猫类',
      age: 2,
      breed: '英短',
      gender: '未知',
      neutered: false,
      ownerName: '王先生',
      contact: '18243535',
    },
  ];

  // 模拟今日挂号
  todayRegistrations.value = [
    {
      id: 'TR001',
      petId: 'P002',
      petName: '兜兜',
      ownerName: '王先生',
      petType: 'cat',
      doctor: '孙医生',
      contact: '18243535',
    },
    {
      id: 'TR002',
      petId: 'P001',
      petName: '球球',
      ownerName: '赵女士',
      petType: 'dog',
      doctor: '孙医生',
      contact: '183',
    },
  ];

  // 默认选择第一个宠物
  if (pets.value.length > 0) {
    selectPet(pets.value[0]);
  }
});
</script>

<template>
  <div class="inpatient-page">
    <div class="page-container">
      <div class="main-content">
        <!-- 左侧：顾客信息和住院列表 -->
        <div class="left-panel">
          <!-- 宠物标签页 -->
          <div class="pet-tabs-section" v-if="petTabs.length > 0">
            <a-tabs
              v-model:active-key="activeTabKey"
              type="editable-card"
              @edit="removePetTab"
              class="pet-tabs"
            >
              <a-tab-pane
                v-for="tab in petTabs"
                :key="tab.id"
                :tab="`${tab.pet.name}(${tab.pet.ownerName})`"
              >
                <!-- 顾客信息 -->
                <div class="customer-info-section">
                  <a-card title="顾客信息" class="customer-card">
                    <div class="customer-details">
                      <div class="pet-info-grid">
                        <div class="info-item">
                          <span class="label">宠物名称:</span>
                          <span class="value">{{ tab.pet.name }}</span>
                        </div>
                        <div class="info-item">
                          <span class="label">主人姓名:</span>
                          <span class="value">{{ tab.pet.ownerName }}</span>
                        </div>
                        <div class="info-item">
                          <span class="label">联系电话:</span>
                          <span class="value">{{ tab.pet.contact }}</span>
                        </div>
                        <div class="info-item">
                          <span class="label">宠物类型:</span>
                          <span class="value">{{ tab.pet.type }}</span>
                        </div>
                        <div class="info-item">
                          <span class="label">品种:</span>
                          <span class="value">{{ tab.pet.breed || '-' }}</span>
                        </div>
                        <div class="info-item">
                          <span class="label">性别:</span>
                          <span class="value">{{ tab.pet.gender }}</span>
                        </div>
                        <div class="info-item">
                          <span class="label">年龄:</span>
                          <span class="value">{{ tab.pet.age || '-' }}岁</span>
                        </div>
                        <div class="info-item">
                          <span class="label">绝育状态:</span>
                          <span class="value">{{
                            tab.pet.neutered ? '已绝育' : '未绝育'
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </a-card>
                </div>

                <!-- 住院列表 -->
                <div class="inpatient-section">
                  <a-card title="住院管理" class="inpatient-card">
                    <a-tabs v-model:active-key="recordsTab" size="small">
                      <a-tab-pane key="inpatient" tab="住院管理">
                        <div class="inpatient-list">
                          <div
                            v-for="group in tab.inpatientGroups"
                            :key="group.id"
                            class="inpatient-item"
                            :class="{
                              active:
                                tab.currentInpatientGroup?.id === group.id,
                            }"
                            @click="selectInpatientGroup(group)"
                          >
                            <div class="inpatient-header">
                              <span class="inpatient-date">{{
                                dayjs(group.admissionDate).format('YYYY-MM-DD')
                              }}</span>
                              <span class="inpatient-doctor">{{
                                group.responsibleDoctor
                              }}</span>
                              <span
                                class="inpatient-status"
                                :class="group.status"
                              >
                                {{
                                  group.status === 'active'
                                    ? '🏥 住院中'
                                    : '✅ 已出院'
                                }}
                              </span>
                            </div>
                            <div class="inpatient-condition">
                              {{ group.conditionClassification }}
                            </div>
                          </div>
                        </div>
                      </a-tab-pane>
                    </a-tabs>

                    <!-- 操作按钮 -->
                    <div class="action-buttons">
                      <a-button type="primary" @click="showNewInpatient">
                        + 新建住院
                      </a-button>
                    </div>
                  </a-card>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>

          <!-- 空状态 -->
          <div v-else class="no-pets-selected">
            <div class="empty-state">
              <div class="empty-icon">🐾</div>
              <div class="empty-text">请选择宠物开始住院管理</div>
            </div>
          </div>
        </div>

        <!-- 中间：住院表单 -->
        <div class="center-panel">
          <div v-if="currentTab" class="inpatient-form">
            <!-- 住院组信息 -->
            <a-card title="住院组" class="inpatient-group-card">
              <a-form layout="vertical">
                <a-row :gutter="16">
                  <a-col :span="8">
                    <a-form-item label="入院日期">
                      <a-date-picker
                        v-model:value="currentTab.formData.admissionDate"
                        format="YYYY-MM-DD"
                        style="width: 100%"
                        @change="handleFormDataChange(currentTab.formData)"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="病情分类">
                      <a-select
                        v-model:value="
                          currentTab.formData.conditionClassification
                        "
                        placeholder="选择病情分类"
                        style="width: 100%"
                        @change="handleFormDataChange(currentTab.formData)"
                      >
                        <a-select-option value="感冒">感冒</a-select-option>
                        <a-select-option value="发烧">发烧</a-select-option>
                        <a-select-option value="外伤">外伤</a-select-option>
                        <a-select-option value="手术">手术</a-select-option>
                        <a-select-option value="其他">其他</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="责任医生">
                      <a-select
                        v-model:value="currentTab.formData.responsibleDoctor"
                        placeholder="选择医生"
                        style="width: 100%"
                        @change="handleFormDataChange(currentTab.formData)"
                      >
                        <a-select-option value="孙医生">孙医生</a-select-option>
                        <a-select-option value="李医生">李医生</a-select-option>
                        <a-select-option value="张医生">张医生</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row :gutter="16">
                  <a-col :span="12">
                    <a-form-item label="出院方式">
                      <a-radio-group
                        v-model:value="currentTab.formData.dischargeMethod"
                        @change="handleFormDataChange(currentTab.formData)"
                      >
                        <a-radio value="manual">
                          手动办理出院,自动递增入住时间
                        </a-radio>
                        <a-radio value="specified">指定出院日期</a-radio>
                      </a-radio-group>
                    </a-form-item>
                  </a-col>
                  <a-col
                    :span="12"
                    v-if="currentTab.formData.dischargeMethod === 'specified'"
                  >
                    <a-form-item label="出院日期">
                      <a-date-picker
                        v-model:value="currentTab.formData.dischargeDate"
                        format="YYYY-MM-DD"
                        style="width: 100%"
                        @change="handleFormDataChange(currentTab.formData)"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row :gutter="16">
                  <a-col :span="8">
                    <a-form-item label="入住时间">
                      <span class="stay-duration"
                        >{{ currentTab.formData.stayDuration || 0 }}天</span
                      >
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-form-item label="备注">
                  <a-textarea
                    v-model:value="currentTab.formData.remarks"
                    placeholder="请输入备注信息"
                    :rows="3"
                    @change="handleFormDataChange(currentTab.formData)"
                  />
                </a-form-item>
              </a-form>
            </a-card>

            <!-- 住院日志 -->
            <a-card title="住院日志" class="inpatient-log-card">
              <div class="log-header">
                <span
                  >住院日志: 若没今日数据,请点击<a
                    @click="showInpatientLogModal"
                    >刷新</a
                  ></span
                >
                <span class="total-consumption">住院期间总消费: ¥0.00</span>
              </div>

              <a-table
                :columns="[
                  { title: '日期', dataIndex: 'date', key: 'date', width: 100 },
                  {
                    title: '打扫',
                    dataIndex: 'cleaning',
                    key: 'cleaning',
                    width: 60,
                  },
                  {
                    title: '装水',
                    dataIndex: 'waterRefill',
                    key: 'waterRefill',
                    width: 60,
                  },
                  {
                    title: '灌食',
                    dataIndex: 'feeding',
                    key: 'feeding',
                    width: 60,
                  },
                  {
                    title: '大便',
                    dataIndex: 'defecation',
                    key: 'defecation',
                    width: 60,
                  },
                  {
                    title: '小便',
                    dataIndex: 'urination',
                    key: 'urination',
                    width: 60,
                  },
                  {
                    title: '测体温',
                    dataIndex: 'temperatureMeasurement',
                    key: 'temperatureMeasurement',
                    width: 80,
                  },
                  {
                    title: '异常情况',
                    dataIndex: 'abnormalConditions',
                    key: 'abnormalConditions',
                    width: 120,
                  },
                  {
                    title: '护理记录',
                    dataIndex: 'nursingRecords',
                    key: 'nursingRecords',
                    width: 120,
                  },
                  {
                    title: '消费合计',
                    dataIndex: 'consumptionTotal',
                    key: 'consumptionTotal',
                    width: 100,
                  },
                ]"
                :data-source="[]"
                :pagination="false"
                size="small"
                class="log-table"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'nursingRecords'">
                    <a-button
                      type="link"
                      size="small"
                      @click="showInpatientLogModal"
                    >
                      + 添加记录
                    </a-button>
                  </template>
                  <template v-else-if="column.key === 'consumptionTotal'">
                    <a @click="showFixedConsumptionModal">0.00 明细</a>
                  </template>
                </template>
              </a-table>

              <div class="log-actions">
                <a-button type="primary" @click="showFixedConsumptionModal">
                  + 每日固定消费
                </a-button>
              </div>
            </a-card>

            <!-- 保存按钮 -->
            <div class="save-section">
              <a-button
                type="primary"
                size="large"
                @click="handleSaveInpatient"
              >
                保存
              </a-button>
            </div>
          </div>

          <div v-else class="no-pet-selected">
            <div class="empty-state">
              <div class="empty-icon">🐾</div>
              <div class="empty-text">请先选择宠物开始住院管理</div>
            </div>
          </div>
        </div>

        <!-- 右侧：选择宠物 -->
        <div class="right-panel">
          <a-card title="选择宠物" class="pet-selection-card">
            <a-tabs v-model:active-key="petSelectionTab" size="small">
              <a-tab-pane key="today" tab="今日挂号">
                <div class="pet-selection">
                  <div class="search-section">
                    <a-input
                      v-model:value="todaySearchQuery"
                      placeholder="顾客/宠物/手机号"
                      @keyup.enter="searchTodayPets"
                    >
                      <template #suffix>
                        <a-button type="text" @click="searchTodayPets">
                          🔍
                        </a-button>
                      </template>
                    </a-input>
                  </div>
                  <div class="pet-list">
                    <div
                      v-for="registration in filteredTodayRegistrations"
                      :key="registration.id"
                      class="pet-item"
                      :class="{
                        active: currentTab?.pet.id === registration.petId,
                      }"
                      @click="selectPetFromRegistration(registration)"
                    >
                      <div class="pet-icon">
                        {{ registration.petType === 'cat' ? '🐱' : '🐕' }}
                      </div>
                      <div class="pet-info">
                        <div class="pet-name">
                          {{ registration.petName }}({{
                            registration.ownerName
                          }})
                        </div>
                        <div class="pet-details">
                          {{ registration.doctor }} {{ registration.contact }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="all" tab="全部">
                <div class="pet-selection">
                  <div class="search-section">
                    <a-input
                      v-model:value="searchQuery"
                      placeholder="顾客/宠物/手机号"
                      @keyup.enter="searchPets"
                    >
                      <template #suffix>
                        <a-button type="text" @click="searchPets">🔍</a-button>
                      </template>
                    </a-input>
                  </div>
                  <div class="pet-list">
                    <div
                      v-for="pet in filteredPets"
                      :key="pet.id"
                      class="pet-item"
                      :class="{ active: currentTab?.pet.id === pet.id }"
                      @click="selectPet(pet)"
                    >
                      <div class="pet-icon">
                        {{ pet.type === '猫类' ? '🐱' : '🐕' }}
                      </div>
                      <div class="pet-info">
                        <div class="pet-name">
                          {{ pet.name }}({{ pet.ownerName }})
                        </div>
                        <div class="pet-contact">{{ pet.contact }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </div>
      </div>
    </div>

    <!-- 住院日志模态框 -->
    <InpatientLogModal
      v-model:visible="inpatientLogVisible"
      :inpatient-group="selectedInpatientGroup"
    />

    <!-- 固定消费模态框 -->
    <FixedConsumptionModal
      v-model:visible="fixedConsumptionVisible"
      :inpatient-group="selectedInpatientGroup"
    />
  </div>
</template>

<style scoped>
.inpatient-page {
  height: 100vh;
  background: #f5f5f5;
}

.page-container {
  height: 100%;
  padding: 16px;
}

.main-content {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 16px;
  height: 100%;
}

.left-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
}

.center-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
}

.right-panel {
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
}

.pet-tabs-section {
  flex: 1;
  overflow: hidden;
}

.pet-tabs {
  height: 100%;
}

.pet-tabs :deep(.ant-tabs-content) {
  height: calc(100% - 46px);
  overflow: hidden;
}

.pet-tabs :deep(.ant-tabs-tabpane) {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.customer-info-section {
  margin-bottom: 16px;
}

.customer-card {
  border: none;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
}

.customer-details {
  min-height: 200px;
}

.pet-info-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
}

.label {
  width: 80px;
  font-weight: 600;
  color: #666;
}

.value {
  flex: 1;
  color: #262626;
}

.inpatient-section {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.inpatient-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: none;
  border-radius: 0;
}

.inpatient-card :deep(.ant-card-body) {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.inpatient-list {
  flex: 1;
  overflow-y: auto;
}

.inpatient-item {
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  transition: all 0.3s;
}

.inpatient-item:hover {
  border-color: #1890ff;
}

.inpatient-item.active {
  background: #e6f7ff;
  border-color: #1890ff;
}

.inpatient-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.inpatient-date {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
}

.inpatient-doctor {
  margin-left: 8px;
  font-size: 12px;
  color: #666;
}

.inpatient-status {
  padding: 2px 6px;
  margin-left: auto;
  font-size: 12px;
  border-radius: 4px;
}

.inpatient-status.active {
  color: #fa8c16;
  background: #fff7e6;
  border: 1px solid #ffd591;
}

.inpatient-status.discharged {
  color: #52c41a;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.inpatient-condition {
  font-size: 12px;
  color: #666;
}

.action-buttons {
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
}

.inpatient-form {
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

.inpatient-group-card {
  margin-bottom: 20px;
}

.inpatient-log-card {
  margin-bottom: 20px;
}

.log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin-bottom: 16px;
  background: #fafafa;
  border-radius: 6px;
}

.total-consumption {
  font-weight: 600;
  color: #1890ff;
}

.log-table {
  margin-bottom: 16px;
}

.log-actions {
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
}

.save-section {
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid #f0f0f0;
}

.stay-duration {
  font-weight: 600;
  color: #1890ff;
}

.no-pet-selected,
.no-pets-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.empty-state {
  color: #999;
  text-align: center;
}

.empty-icon {
  margin-bottom: 16px;
  font-size: 48px;
}

.empty-text {
  font-size: 16px;
}

.pet-selection {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.search-section {
  margin-bottom: 16px;
}

.pet-list {
  flex: 1;
  overflow-y: auto;
}

.pet-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  transition: all 0.3s;
}

.pet-item:hover {
  border-color: #1890ff;
}

.pet-item.active {
  background: #e6f7ff;
  border-color: #1890ff;
}

.pet-icon {
  font-size: 24px;
}

.pet-info {
  flex: 1;
}

.pet-name {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}

.pet-contact,
.pet-details {
  font-size: 12px;
  color: #666;
}

:deep(.ant-card-head) {
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.ant-card-body) {
  padding: 16px;
}

:deep(.ant-tabs-nav) {
  margin-bottom: 0;
}

:deep(.ant-tabs-tab) {
  font-size: 12px;
}

:deep(.ant-tabs-tab-active) {
  font-weight: 600;
}
</style>
